
<template>
  <div class="dao" @click="gotopage" :style="style">
    <van-circle
      v-model:current-rate="currentRate"
      :rate="rate"
      :color="color"
      :text="flag? Math.ceil((total - currentRate) / (total / time)) + 'S': currentRate.toFixed(0) + '%'"
      :size="size"
      :stroke-width="strokeWidth"
    />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted ,ref} from "vue";
import { useCommonHook } from "../hooks";

const props = defineProps({     // 接受来自外部的参数 props
  size: {
    type: String,
    default: "55px",
  },
  strokeWidth: Number,
  color: {
    type: [Object, String],
    default: {
      "0%": "#3fecff",
      "100%": "#6149f6",
    }
  },
  time: {
    type: Number,
    default: 5,
  },
  flag: {
    type: Boolean,  // 默认为 false
  },
  style: {
    type: Object,
    default: {},
  },
  onEnd: {
    type: Function,
  },
});
const total = 100;
const currentRate = ref(0);
const rate = ref(0);
const gradientColor = {
  "0%": "#3fecff",
  "100%": "#6149f6",
};
var timer = null;

const timeDown = () => {
  timer = setInterval(() => {
    if (currentRate.value < total) {
      currentRate.value++;
    } else {
      clearInterval(timer);
      timer = null;
      props.onEnd && props.onEnd();    // 倒计时结束的操作
    }
  }, props.time * 10);
};
onMounted(() => {
  timeDown();
});

// 组件销毁
onUnmounted(() => {
  clearInterval(timer);
  timer = null;
});
</script>

<style lang="scss" scoped>
.dao {
  position: fixed;
  z-index: 1999;
  top: 20px;
  right: 20px;

  ::v-deep .van-circle__text {
    font-size: 13px;
  }
}
</style>